<template>
  <div>
    <el-form class="m7-form dockForm" :rules="rules"
      size="mini" :model="dockForm"
      ref="dockForm" label-position="top">
      <el-form-item label="功能页名称" prop="label">
        <el-input v-model.trim="dockForm.label" :maxlength="40" placeholder="请输入功能页名称" size="mini"></el-input>
      </el-form-item>
      <el-form-item prop="url">
        <span slot="label">
          URL
          <el-tooltip class="item" effect="dark" content="为提高安全性，建议使用Https:开头的地址对接。" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-input v-model.trim="dockForm.url" placeholder="请输入URL" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="应用场景" prop="scene">
        <m7Select size="mini"
          filterable
          class="paramsSelect fl"
          v-model="dockForm.scene"
          multiple
          :options="sceneOption"
          placeholder="请选择">
        </m7Select>
      </el-form-item>
      <el-form-item class="rightLeft borderForm">
        <span slot="label">
          参数
          <el-tooltip class="item" effect="dark" content="开启后参数会拼接到URL后面" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-switch v-model="dockForm.isParameter"></el-switch>
      </el-form-item>
      <el-form-item v-show="dockForm.isParameter" style="marginTop: -20px">
        <ul class="paramsUl">
          <span class="">参数</span><span>自定义名称</span>
          <span>
            加密
            <el-tooltip class="item" effect="dark" content="开启之后系统数据会被加密可以使用秘钥（对接设置）解密" placement="top">
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></i>
            </el-tooltip>
          </span>
          <li v-for="(item, index) in paramsArr" :key="index" class="clearfix paramsItem">
            <m7Select size="mini"
              filterable
              class="paramsSelect fl"
              v-model="item.originParam"
              :options="selectData"
              placeholder="请选择">
            </m7Select>
            <el-input  class="paramsIpt fl" v-model="item.customParam" placeholder="请输入自定义名称"></el-input>
            <el-switch class="fl paramsSwitch" v-model="item.encrypted"></el-switch>
            <span class="el-icon-minus" @click="delParams(index)"></span>
          </li>
        </ul>
        <div class="addParams" @click="addParams">
          <span class="V7_iconV7tubiao_xinzeng V7_iconfont"></span>
          添加变量
        </div>
      </el-form-item>
      <el-form-item class="rightLeft">
        <span slot="label">
          token验证
          <el-tooltip class="item" effect="dark" content="
            1.开启之后会在访问页面的地址后加上 tokenId
            2.页面拿到这个参数之后，可以通过我们的校验接口(对接设置)来校验身份" placement="top">
            <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
          </el-tooltip>
        </span>
        <el-switch v-model="dockForm.isToken"></el-switch>
      </el-form-item>
      <el-form-item label="URL预览">
        <div class="previewUrl">
          {{previewUrl}}
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
const dockFormTemp = {
  _id: '',
  label: '',
  url: '',
  isEnable: 'enable',
  isParameter: true,
  isToken: false,
  scene: []
}
@Component({
  name: 'addOrEditDock'
})
export default class FuncDocking extends Vue {
  private privewUrl: string = ''

  private rules = {
    label: [{ required: true, trigger: 'blur', message: '请输入功能页名称' }],
    url: [{ required: true, trigger: 'blur', message: '请输入URL' }],
    scene: [{ required: true, trigger: 'blur', message: '请选择应用场景' }]
  }

  public dockForm: any = {
    _id: '',
    label: '',
    url: '',
    scene: [],
    isEnable: 'enable',
    isParameter: true,
    isToken: false
  }

  private sceneOption = [
    { label: '在线', value: 'chat' },
    { label: '呼入', value: 'incoming' },
    { label: '外呼', value: 'dialout' },
    { label: '咨询转移', value: 'consultTransfer' },
    { label: '呼叫转移', value: 'transfer' },
    { label: 'webcall', value: 'webcall' },
    { label: '预览外呼', value: 'previewDialout' },
    { label: '自动外呼', value: 'autoDialout' }
  ]

  private selectData = [
    // { label: '主叫', value: 'trunkNumber' },
    // { label: '被叫', value: 'customerNumber' },
    { label: '客户号码', value: 'customerNumber' },
    { label: '通话记录ID', value: 'superUniqueId' },
    { label: '技能组编号', value: 'queueNumber' },
    { label: '座席工号', value: 'agentNumber' },
    { label: '响铃时间', value: 'answerTime' },
    { label: '技能组名称', value: 'queueName' },
    { label: 'ivr', value: 'ivrId' },
    { label: '在线访客ID', value: 'visitorId' },
    { label: '在线访客昵称', value: 'visitorName' },
    { label: '在线会话ID', value: 'sessionId' },
    { label: '在线访客openID', value: 'openId' },
    { label: '在线访客unionID', value: 'unionid' },
    { label: '公众号appId', value: 'appId' },
    { label: '接入号名称', value: 'accessName' },
    { label: '接入号ID', value: 'accessId' },
    { label: '客户ID', value: 'customerId' },
    { label: '客户名称', value: 'customerName' },
    { label: '账户ID', value: 'account' },
    { label: '外呼任务号码备注', value: 'memo' }
  ]

  public paramsArr = [
    { customParam: '', originParam: '', encrypted: false }
  ]

  get previewUrl () {
    let url: string = this.dockForm.url
    if (url && url.indexOf('?') === -1) {
      url = url + '?'
    } else {
      if (url.substring(url.length - 1) !== '?') {
        url = url + '&'
      }
    }
    if (this.dockForm.isParameter) {
      this.paramsArr.forEach((item, index) => {
        if (item.customParam || item.originParam) {
          if (item.customParam) {
            url = url += `${index === 0 ? '' : '&'}${item.customParam}=`
          } else {
            url = url += `${index === 0 ? '' : '&'}${item.originParam}=`
          }
        }
      })
    }
    if (this.dockForm.isToken) {
      if (this.dockForm.isParameter) {
        url = url + '&tokenId='
      } else {
        url = url + 'tokenId='
      }
    }
    return url
  }

  public setFunDockData (data?: any) {
    if (data) {
      const { label, url, isParameter, isToken, isEnable, _id, scene } = data
      this.dockForm = { label, url, isParameter, isToken, isEnable, _id, scene }
    } else {
      this.dockForm = deepClone(dockFormTemp)
    }
  }

  public setParamsArr (data?: any) {
    if (data) {
      this.paramsArr = data
    } else {
      this.paramsArr = [
        { customParam: '', originParam: '', encrypted: false }
      ]
    }
  }

  private addParams () {
    this.paramsArr.push(
      { customParam: '', originParam: '', encrypted: false }
    )
  }

  private delParams (index: number) {
    this.paramsArr.splice(index, 1)
  }
}
</script>
<style lang="stylus" scoped>
  .V7_iconfont
    font-size 12px
  .addParams
    font-size 12px
    color #008BEE
    cursor pointer
    .V7_iconV7tubiao_xinzeng
      font-size 12px
  .paramsUl
    span
      display inline-block
      font-size 12px
    .paramsItem
      margin-bottom 5px
      .paramsSelect
        width 120px
        margin-right 20px
      .paramsIpt
        width 140px
        margin-right 20px
      .paramsSwitch
        margin-top 5px
      .el-icon-minus
        font-size 12px
        color red
        margin-left 20px
        cursor pointer
  .paramsUl span:first-child
    width 140px
  .paramsUl span:nth-child(2)
    width 160px
  .previewUrl
    border 1px solid $border-main
    padding 10px 12px
    background #F6F6F9
    color $icon-gray
    border-radius 4px
    word-wrap break-word
    word-break break-all
  .tip-span
    color $icon-gray
    font-size 12px
    cursor pointer
</style>
<style lang="stylus">
  .rightLeft
    .el-form-item__label
      float left
    .el-form-item__content
      float left
      margin -9px 0px 0px 20px
  .borderForm
    border-bottom 1px solid $border-main
</style>
